<template>
  <div style="height: 100%">
    <Title title="高风险人群" @click-more="handleClickMore">
      <AccRadio v-model="currentCheck" :options="options"></AccRadio>
    </Title>
    <AccPie :echartData="echartData">
      <div class="describe">
        <div v-for="(item, index) in echartData" :key="index">
          {{ item.name }}：{{ item.value }}人
        </div>
      </div>
    </AccPie>
  </div>
</template>

<script>
import { getPreventionRiskScreenCount } from '@/views/children/antiepidemic/js/statisticalAnalysis'
import Title from '../Title'
import AccRadio from '@/components/common/AccRadio'
import AccPie from '../common/AccPie.vue'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { Title, AccRadio, AccPie },
  data () {
    return {
      currentCheck: '学生',
      options: ['学生', '教师', '全部'],
      echartData: []
    }
  },
  watch: {
    currentCheck: {
      handler () {
        this.getData()
      },
      immediate: true
    }
  },
  methods: {
    handleClickMore () {
      this.$router.push({ path: '/antiepidemic/antiepidemicRisk' })
    },
    getData () {
      let typeJson = {
        '学生': 2,
        '教师': 1,
        '全部': -1
      }
      getPreventionRiskScreenCount({
        userType: typeJson[this.currentCheck]
      }).then(res => {
        const { data } = res
        this.echartData = []
        data.xJson.reduce((prev, cur, index) => {
          prev.push({ name: cur, value: data.yJson[index] })
          return prev
        }, this.echartData)
        // this.echartData.label = data?.xJson || []
        // this.echartData.value = data?.yJson || []
        // this.echartData.value = [data.antigenStatusCount, data.healthCodeStatusCount]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.describe {
  height: calc(100% - 40px);
  overflow: hidden;
  overflow-y: auto;
}
</style>
